<!-- 表格组件 -->
<script lang="tsx" setup>
import { toRaw } from "vue";

import type { TableColumnOption } from "@/components/table-widget/table-widget.vue";
import TableWidget from "@/components/table-widget/table-widget.vue";

import { injectState } from "../state";

defineOptions({ name: "Sheet" });

const {
	selectedList,
	tableRef,
	detailDialogRef,
	page: { records, isLoading, execute },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());

const columns: TableColumnOption<(typeof records.value)[0]>[] = [
	{
		type: "selection",
		fixed: "left",
		noExport: true,
	},
	{
		label: "姓名",
		width: "100",
		formatter: (row) => row.name ?? "-",
	},
	{
		label: "身份证号",
		width: "150",
		formatter: (row) => row.icNumber ?? "-",
	},
	{
		label: "联系方式",
		width: "120",
		formatter: (row) => row.phone ?? "-",
	},
	{
		label: "培训类型",
		width: "100",
		formatter: (row) => row.workCategoryText ?? "-",
	},
	{
		label: "车牌号",
		width: "120",
		formatter: (row) => row.applyDate ?? "A83611",
	},
	{
		label: "车辆类型",
		width: "100",
		formatter: (row) => row.vehicleType ?? "-",
	},
	{
		label: "驾驶证号",
		width: "120",
		formatter: (row) => row.driversLicense ?? "-",
	},
	{
		label: "驾驶证截止日期",
		width: "170",
		formatter: (row) => row.dlEndDate ?? "-",
	},
	{
		label: "危险品从业资格证号",
		width: "170",
		formatter: (row) => row.credentials ?? "-",
	},
	{
		label: "危险品从业资格证截止日期",
		width: "200",
		formatter: (row) => row.creEndDate ?? "-",
	},
	{
		label: "培训状态",
		width: "100",
		formatter: (row) => {
			if (row.status === "1") {
				return (
					<>
						<div
							style={{
								color: "#007CB4",
								height: "26px",
								width: "60px",
								backgroundColor: "#E0F5FF",
								display: "flex",
								justifyContent: "center",
								alignItems: "center",
								marginLeft: "4px",
							}}
						>
							<span>未开始</span>
						</div>
					</>
				);
			} else if (row.status === "2") {
				return (
					<div
						style={{
							color: "#007CB4",
							height: "26px",
							width: "60px",
							backgroundColor: "#E0F5FF",
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							marginLeft: "4px",
						}}
					>
						<span>进行中</span>
					</div>
				);
			} else if (row.status === "3") {
				return (
					<>
						<div
							style={{
								color: "#00B42A",
								height: "26px",
								width: "60px",
								backgroundColor: "#E8FFEA",
								display: "flex",
								justifyContent: "center",
								alignItems: "center",
								marginLeft: "4px",
							}}
						>
							<span>已完成</span>
						</div>
					</>
				);
			} else {
				return "--";
			}
		},
	},
	{
		label: "完成日期",
		width: "120",
		formatter: (row) => row.finishDate ?? "-",
	},
];
</script>

<template>
	<TableWidget
		fit
		ref="tableRef"
		v-loading="isLoading"
		:data="records"
		:columns="columns"
		h="100%!"
		@selection-change="(rows:any) => (selectedList = toRaw(rows))"
	/>
</template>
<style scoped lang="scss">
.el-table td.el-table__cell div {
	display: flex;
	justify-content: center !important;
}
</style>
